﻿
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover">
<title> </title>
<link href="css/reset.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet" /> <!-- 把样式写在这里   -->
<link type="text/css" rel="stylesheet"  href="css/swiper.min.css">
<script type="text/javascript" src="js/flexible.js"></script>
</head>
<body>
	<div class="index-wrappy">
		<div class="select">
			<div class="clearfix choose">
				<a href="" class="select_1 active">精选</a>
				<a href="" class="select_1">女频</a>
				<a href="" class="select_1">男频</a>
			</div>
			<div class="clearfix search">
				<input class="input" type="请输入书名搜索">
				<img class="sear" src="./images/sear.png" alt="">
			</div>
		</div>

		<div class="banner-box">
			<div class="swiper-container">
			 	<div class="swiper-wrapper">
					 <div class="swiper-slide" >
					 	<a  class="banner" href="">
					 		<img  src="./images/banner.jpg">
					 	</a>
					 </div>
					 <div class="swiper-slide" >
					 	<a class="banner" href="">
					 		<img  src="./images/banner.jpg">
					 	</a>
					 </div>
				 </div>
				  <div class="swiper-pagination"></div>
			</div>
		</div>

		<div class="classification">
			<div class="clearfix ranking">
				<a href="">
					<img src="./images/1.png" alt="" style="width: 30%;">
					<p class="After_completing_this">分类</p>
				</a>
			</div>
			<div class="clearfix ranking">
				<a href="">
					<img src="./images/2.png" alt="" style="width: 30%;">
					<p class="After_completing_this">排行</p>
				</a>
			</div>
			<div class="clearfix ranking">
				<a href="">
					<img src="./images/3.png" alt="" style="width: 30%;">
					<p class="After_completing_this">完本</p>
				</a>
			</div>
			<div class="clearfix ranking">
				<a href="">
					<img src="./images/4.png" alt="" style="width: 30%;">
					<p class="After_completing_this">签到</p>
				</a>
			</div>
		</div>
		<div class="segmentation"></div>

		<!-- 主编力荐 此处图片隐藏忘记怎么写了 -->
		<div class="recommended">
			<div style="height:42px;">
				<p class="Book_recommendation">主编力荐</p>
				<a class="More_and_more" href="">更多</a>
				<div class="right1">
					<img class="right1_img" src="./images/right1.png" alt="">
				</div>
			</div>
			 <div class="book-box">
				<div class="swiper-container-book">
					<div class="swiper-wrapper">
						<div class="swiper-slide clearfix hidden_2">
							<a href="" style="display: block;">
								<img src="./images/test.jpg" alt="" style="width: 100%;">
								<p class="test_1">书名</p>
							</a>
						</div>
						<div class="swiper-slide clearfix hidden_2">
							<a href="" style="display: block;">
								<img src="./images/test.jpg" alt="" style="width: 100%;">
								<p class="test_1">书名</p>
							</a>
						</div>
						<div class="swiper-slide clearfix hidden_2">
							<a href="" style="display: block;">
								<img src="./images/test.jpg" alt="" style="width: 100%;">
								<p class="test_1">书名</p>
							</a>
						</div>
						<div class="swiper-slide clearfix hidden_2">
							<a href="" style="display: block;">
								<img src="./images/test.jpg" alt="" style="width: 100%;">
								<p class="test_1">书名</p>
							</a>
						</div>
					</div>	
				</div>
			</div>
		</div>

		<div class="segmentation"></div>
		<div class="recommended">
			<div style="height:42px;">
				<p class="Book_recommendation">新书速递</p>
				<a class="More_and_more" href="">更多</a>
				<div class="right1">
					<img class="right1_img" src="./images/right1.png" alt="">
				</div>
			</div>
			<div class="clearfix">
				<div class="clearfix Title_1">
					<a class="Title_2" href="">
						<img class="test_img" src="./images/test.jpg" alt="">
						<p class="test_score">9.4分</p>
						<p class="test_1">书名</p>
					</a>
				</div>
				<div class="clearfix Title_1">
					<a class="Title_2" href="">
						<img class="test_img" src="./images/test.jpg" alt="">
						<p class="test_score">9.4分</p>
						<p class="test_1">书名</p>
					</a>
				</div>
				<div class="clearfix Title_1">
					<a class="Title_2" href="">
						<img class="test_img" src="./images/test.jpg" alt="">
						<p class="test_score">9.4分</p>
						<p class="test_1">书名</p>
					</a>
				</div>
				<div class="clearfix Title_1">
					<a class="Title_2" href="">
						<img class="test_img" src="./images/test.jpg" alt="">
						<p class="test_score">9.4分</p>
						<p class="test_1">书名</p>
					</a>
				</div>
			</div>
			<div class="clearfix" style="margin-top:10px;">
				<div class="clearfix Title_1">
					<a class="Title_2" href="">
						<img class="test_img" src="./images/test.jpg" alt="">
						<p class="test_score">9.4分</p>
						<p class="test_1">书名</p>
					</a>
				</div>
				<div class="clearfix Title_1">
					<a class="Title_2" href="">
						<img class="test_img" src="./images/test.jpg" alt="">
						<p class="test_score">9.4分</p>
						<p class="test_1">书名</p>
					</a>
				</div>
				<div class="clearfix Title_1">
					<a class="Title_2" href="">
						<img class="test_img" src="./images/test.jpg" alt="">
						<p class="test_score">9.4分</p>
						<p class="test_1">书名</p>
					</a>
				</div>
				<div class="clearfix Title_1">
					<a class="Title_2" href="">
						<img class="test_img" src="./images/test.jpg" alt="">
						<p class="test_score">9.4分</p>
						<p class="test_1">书名</p>
					</a>
				</div>
			</div>
		</div>
		<div class="segmentation"></div>
		<div class="recommended">
			<div style="height:42px;">
				<p class="Book_recommendation">榜单精选</p>
				<a class="More_and_more" href="">更多</a>
				<div class="right1">
					<img class="right1_img" src="./images/right1.png" alt="">
				</div>
			</div>
			<div class="clearfix">
				<div class="clearfix letters">
					<a class="test_2" href="">
						<img class="test_img_2" src="./images/test.jpg" alt="">
					</a>
					<a class="Title_letters" href="">
						<p>书名</p>
						<p class="Content_abstract">书简书简书简书简书简书简书简书简书简书简书简书简书简书简书简简书简书简简书简书简</p>
						<p class="Now_the_word">
							<span class="word-titles" style="float: left;">青春都市/现言</span>
							<span class="loading">加载</span>
							<span class="Number_words">125万字</span>
						</p>
					</a>
				</div>
			</div>

			<div class="clearfix">
				<div class="clearfix letters">
					<a class="test_2" href="">
						<img class="test_img_2" src="./images/test.jpg" alt="">
					</a>
					<a class="Title_letters" href="">
						<p>书名</p>
						<p class="Content_abstract">书简书简书简书简书简书简书简书简书简书简书简书简书简书简书简简书简书简简书简书简</p>
						<p class="Now_the_word">
							<span class="word-titles" style="float: left;">青春都市/现言</span>
							<span class="loading">加载</span>
							<span class="Number_words">125万字</span>
						</p>
					</a>
				</div>
			</div>

			<div class="clearfix">
				<div class="clearfix letters">
					<a class="test_2" href="">
						<img class="test_img_2" src="./images/test.jpg" alt="">
					</a>
					<a class="Title_letters" href="">
						<p>书名</p>
						<p class="Content_abstract">书简书简书简书简书简书简书简书简书简书简书简书简书简书简书简简书简书简简书简书简</p>
						<p class="Now_the_word">
							<span class="word-titles" style="float: left;">青春都市/现言</span>
							<span class="loading">加载</span>
							<span class="Number_words">125万字</span>
						</p>
					</a>
				</div>
			</div>
		</div>
		<div class="segmentation"></div>
		<div class="recommended">
			<div style="height:42px;">
				<p class="Book_recommendation">榜单精选</p>
				<a class="More_and_more" href="">更多</a>
				<div class="right1">
					<img class="right1_img" src="./images/right1.png" alt="">
				</div>
			</div>
			<div class="clearfix">
				<div class="clearfix" style="width: 100%;background: white;">
					<a class="test_2" href="">
						<img class="test_img_2"src="./images/test.jpg" alt="">
					</a>
					<a class="letters_2" href="">
						<div class="clearfix Title_letters_2">
							<p>书名</p>
							<p class="score">9.4分</p>
							<p class="Content_abstract_2">书简书简书简书简书简书简书简书简书简书简书简书简书简书简书简简书简书简简书简书简</p>
						</div>
					</a>
				</div>
			</div>
			<div class="type3_box clearfix">
				<div class=" clearfix hidden_2">
					<a href="" style="display: block;">
						<img src="./images/test.jpg" alt="" style="width: 100%;">
						<p class="test_1">书名</p>
					</a>
				</div>
				<div class=" clearfix hidden_2">
					<a href="" style="display: block;">
						<img src="./images/test.jpg" alt="" style="width: 100%;">
						<p class="test_1">书名</p>
					</a>
				</div>
				<div class=" clearfix hidden_2">
					<a href="" style="display: block;">
						<img src="./images/test.jpg" alt="" style="width: 100%;">
						<p class="test_1">书名</p>
					</a>
				</div>
				<div class=" clearfix hidden_2">
					<a href="" style="display: block;">
						<img src="./images/test.jpg" alt="" style="width: 100%;">
						<p class="test_1">书名</p>
					</a>
				</div>
			</div>	

			 

			 
		</div>
		<div class="botton-height"></div>
		<div class="bottom">
			<div class="clearfix a_bookcase">
				<a href="./shujia.html" style="display: block;">
					<img class="books_img" src="./images/1-1.png" alt="">
					<p class="bottom_classification">书架</p>
				</a>
			</div>
			<div class="clearfix a_bookcase">
				<a href="" style="display: block;">
					<img class="books_img"src="./images/1-2.png" alt="">
					<p class="bottom_classification">书城</p>
				</a>
			</div>
			<div class="clearfix a_bookcase">
				<a href="./user.html" style="display: block;">
					<img class="books_img" src="./images/1-3.png" alt="">
					<p class="bottom_classification">我的</p>
				</a>
			</div>
		</div>
	</div>

	<script src="js/swiper.min.js?v=0.1"></script>
	<script type="text/javascript">
		var swiper = new Swiper('.swiper-container', {
				      pagination: {
				        el: '.swiper-pagination',
				      },
				    });
		 var book = new Swiper('.swiper-container-book', {
		      slidesPerView: 3,
		      spaceBetween: 30,
		      freeMode: true,
		      pagination: {
		        el: '.swiper-pagination-book',
		        clickable: true,
		      },
		    });
	</script>
</body>

</html>